<template>
  <view class="page">
    <view class="align-center header justify-between">
      <view class="align-center">
        <view class="section_5">
          <text class="text_4" :class="{ actText_4: sectionIndex == 1 }" @click="changeList(1)"> 出手{{ sectionIndex == 1 ? loopData.length : '' }} </text>
          <view class="section_1" v-if="sectionIndex == 1"></view>
        </view>
        <view class="section_5">
          <text class="text_4" :class="{ actText_4: sectionIndex == 2 }" @click="changeList(2)"> 入手{{ sectionIndex == 2 ? loopData.length : '' }} </text>
          <view class="section_1" v-if="sectionIndex == 2"></view>
        </view>
      </view>
      <view class="ipt">
        <uni-easyinput prefixIcon="search" v-model="content" @confirm="init()" placeholder="搜索" @iconClick="init()"> </uni-easyinput>
      </view>
    </view>

    <view class="flex-col mt10">
      <view class="image-text_2 flex-row justify-between" v-for="(item, index) in loopData" :key="index">
        <uv-loading-icon v-if="!item.thumb_image" inactive-color="red" mode="semicircle" class="image_2" :size="30"></uv-loading-icon>
        <image class="image_2" mode="aspectFill" :src="item.thumb_image" />

        <view class="block_3 flex-col">
          <text class="text-group_2" v-html="item.title" @click="goDetail(item.id)"></text>

          <view class="group_8 flex-row align-center justify-end">
            <view class="status" v-if="sectionIndex == 1 && item.status_switch != 1"> {{ statusMap[item.status_switch] }} </view>

            <view class="seeNum" v-if="sectionIndex == 1 && item.status_switch == 1"> 浏览量:{{ item.see }} </view>

            <view class="text-wrapper_33" @click="delMyDeal(item.article_id)"> 删除 </view>

            <view class="text-wrapper_33" v-if="sectionIndex == 1 && item.sold == 0" @click="soldOut(item.article_id)"> 下架 </view>

            <view class="text-wrapper_33" v-if="sectionIndex == 1 && item.sold == 0" @click="$to('/pages/publish/index?id=' + item.article_id)"> 编辑 </view>
            <!-- item.is_evaluate != 1  -->
            <view
              class="text-wrapper_33"
              v-if="item.is_evaluate == 0 && sectionIndex == 2 && item.status == 3"
              @click="$to('/pages/evaluate/index?toUser=' + item.sold_user_id + '&goodId=' + item.article_id)"
            >
              去评价
            </view>
          </view>
        </view>
      </view>
    </view>

    <view v-if="loopData.length == 0" class="noneData"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loopData: [],
      sectionIndex: 1,
      statusMap: {
        0: '审核中',
        1: '审核通过',
        2: '拒绝'
      },
      content: '',
      page: 1,
      total: 0
    }
  },
  onLoad() {
    this.init()
  },
  onReachBottom(e) {
    if (this.loopData.length < this.total) {
      this.page++
      this.getData(true)
    }
  },
  methods: {
    changeList(i) {
      this.sectionIndex = i
      this.init()
    },
    init(type) {
      if (!type) {
        this.loopData = []
      }
      this.$http({ url: 'getDealList', data: { type: this.sectionIndex, content: this.content, page: this.page } }).then(res => {
        this.total = res.data.total
        this.loopData = res.data.data.map(el => {
          if (el.thumb_image.endsWith('.mp4')) el.thumb_image = el.thumb_image2

          return el
        })
      })
    },
    goDetail(id) {
      if (this.sectionIndex == 2) {
        this.$to('/pages/productDetail/index?id=' + id)
      }
    },
    delMyDeal(id) {
      uni.showModal({
        title: '提示',
        content: '是否删除？',
        success: res => {
          if (res.confirm) {
            this.$http({ url: 'dealDel', data: { article_id: id, type: this.sectionIndex } }).then(res => {
              this.init()
            })
          }
        }
      })
    },
    soldOut(id) {
      this.$http({ url: 'offdown ', data: { article_id: id } }).then(res => {
        this.page = 1
        this.init()
        uni.showToast({
          title: '下架成功',
          icon: 'none'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../common/common.css';
.page {
  background-color: rgba(248, 248, 248, 1);
  position: relative;
  width: 100%;
  overflow: hidden;
  min-height: 100vh;
  padding: 0 2.5%;
  overflow-y: scoll;
  padding-bottom: 50px;
}
.header {
  width: 100%;
  margin-top: 10px;
  .ipt {
    width: 150px;
    display: block;
    ::v-deep .uni-easyinput__content {
      border-radius: 20px;
    }
  }
}
.text-wrapper_33 {
  border-radius: 15px;
  font-size: 12px;
  border: 1px solid rgba(241, 241, 241, 1);
  text-align: center;
  margin-left: 20rpx;
  padding: 5px 10px;
}

.section_5 {
  position: relative;
  z-index: 2;
  margin-right: 20px;
}

.text_4 {
  color: rgba(153, 153, 153, 1);
  font-size: 28rpx;
  margin-top: 18rpx;
}
.actText_4 {
  font-weight: 600;
  font-size: 18px;
  color: #111111;
}

.section_1 {
  width: 52rpx;
  height: 12rpx;
  background: url('../../static/img/dot.png') 100% no-repeat;
  background-size: 100% 100%;
  position: absolute;
  bottom: 2px;
  z-index: -1;
}

.section_2 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 15px;
  margin-left: 296rpx;
  padding: 18rpx 42rpx 18rpx 38rpx;
}

.image-text_5 {
  width: 140rpx;
}

.thumbnail_3 {
  width: 24rpx;
  height: 24rpx;
}

.text-group_1 {
  height: 24rpx;
  overflow-wrap: break-word;
  color: rgba(153, 153, 153, 1);
  font-size: 24rpx;
  font-family: SourceHanSansCN-Normal;
  font-weight: NaN;
  text-align: left;
  white-space: nowrap;
  line-height: 24rpx;
}

.text-wrapper_3 {
  position: absolute;
  left: 142rpx;
  top: 10rpx;
  width: 102rpx;
  height: 50rpx;
  overflow-wrap: break-word;
  font-size: 0;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 54rpx;
}

.text_5 {
  height: 50rpx;
  overflow-wrap: break-word;
  color: rgba(17, 17, 17, 1);
  font-size: 36rpx;
  font-family: SourceHanSansCN-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 54rpx;
}

.image-text_2 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 6px;
  width: 100%;
  margin: 0 auto;
  margin-bottom: 20rpx;
  padding: 30rpx;
}

.image_2 {
  width: 160rpx;
  height: 160rpx;
  border-radius: 10px;
}

.block_3 {
  height: 160rpx;
  width: 70%;
}

.text-group_2 {
  height: 78rpx;
  color: rgba(51, 51, 51, 1);
  font-size: 30rpx;
  text-align: left;
  line-height: 42rpx;

  width: 100%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.group_8 {
  margin-top: 30rpx;
}

.status {
  font-size: 12px;
}
.seeNum {
  font-size: 12px;
  color: #999999;
}
</style>
